<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div class="crud-opts">
        <el-button
          v-permission="permission.approve"
          class="filter-item"
          type="primary"
          size="mini"
          icon="el-icon-circle-check"
          :disabled="crud.selections.length < 1"
          @click="doAllAgree(crud.selections)"
        >同意</el-button>
        <el-button
          v-permission="permission.approve"
          class="filter-item"
          type="danger"
          size="mini"
          icon="el-icon-circle-close"
          :disabled="crud.selections.length < 1"
          @click="doAllRefuse(crud.selections)"
        >拒绝</el-button>
      </div>
    </div>
    <!--表单组件-->
    <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="form.userId" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="云桌面种类" prop="kind">
          <el-input v-model="form.kind" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="审批状态" prop="status">
          <el-input v-model="form.status" style="width: 370px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" stripe height="calc(100vh - 270px)" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="userId" label="申请人" :formatter="formatUserId" />
      <el-table-column prop="userId" label="所属公司" :formatter="formatUserName" />
      <el-table-column prop="kind" label="现云平台" :formatter="formatKind" />
      <el-table-column prop="kind" label="切换至" :formatter="formatKind2" />
      <el-table-column prop="typeName" label="理由" />
      <el-table-column prop="description" label="具体描述" />
      <!--      <el-table-column prop="status" label="审批状态" :formatter="formatStatus" />-->
      <el-table-column prop="updateTime" label="申请时间" />
      <el-table-column v-if="checkPer(['admin','userDesktop:approve'])" label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <el-button v-permission="permission.approve" :disabled="scope.row.status!==0" class="filter-item" type="text" icon="el-icon-success" @click="doAgree([scope.row.userId])">同意</el-button>
          <el-button v-permission="permission.approve" :disabled="scope.row.status!==0" class="uifix-table-action-error-btn" type="text" icon="el-icon-error" @click="doRefuse([scope.row.userId])">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import crudUserDesktop, { userDesktopPass, userDesktopNoPass } from '@/api/system/approve'
import CRUD, { presenter, header, form, crud } from '@brotherCrud/crud'
import pagination from '@brotherCrud/Pagination'
import _ from 'lodash'

const defaultForm = { userId: null, kind: null, status: null, createBy: null, updateBy: null, createTime: null, updateTime: null }
export default {
  name: 'UserDesktop',
  components: { pagination },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '项目：用户云桌面关联', url: 'api/userDesktop', idField: 'userId', sort: 'userId,desc', crudMethod: { ...crudUserDesktop }})
  },
  data() {
    return {
      permission: {
        add: ['admin', 'approve:add'],
        edit: ['admin', 'approve:edit'],
        del: ['admin', 'approve:del'],
        approve: ['admin', 'userDesktop:approve']
      },
      rules: {
        userId: [
          { required: true, message: '用户ID不能为空', trigger: 'blur' }
        ],
        kind: [
          { required: true, message: '云桌面种类不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '审批状态不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'userId', display_name: '用户ID' },
        { key: 'kind', display_name: '云桌面种类' },
        { key: 'status', display_name: '审批状态' }
      ]
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    // 格式化现云平台
    formatUserName(rowData) {
      let x = null
      if (rowData.user.id) {
        x = rowData.user.dept.name
      }
      return x
    },
    // 格式化现云平台
    formatUserId(rowData) {
      let x = null
      if (rowData.user.id) {
        x = rowData.user.nickName
      }
      return x
    },
    // 格式化现云平台
    formatKind(rowData) {
      let x = null
      switch (rowData.kind) {
        case 1:x = '纵骥'
          break
        case 2:x = '泛云'
          break
        default:
          x = '种类未知'
      }
      return x
    },
    formatKind2(rowData) {
      let x = null
      switch (rowData.kind) {
        case 1:x = '泛云'
          break
        case 2:x = '纵骥'
          break
        default:
          x = '种类未知'
      }
      return x
    },
    // formatStatus(rowData) {
    //   let x = null
    //   // 审批状态(-1:不通过, 0:审批中, 1:通过)
    //   switch (rowData.status) {
    //     case -1:x = '不通过'
    //       break
    //     case 0:x = '审批中'
    //       break
    //     case 1:x = '通过'
    //       break
    //     default:
    //       x = '状态未知'
    //   }
    //   return x
    // },
    // 同意
    doAgree(userId) {
      this.$confirm('确定同意吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sureAgree(userId)
      })
    },
    // 确定同意
    sureAgree(userId) {
      userDesktopPass(userId).then(() => {
        this.crud.notify('同意成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        // this.crud.data.map(function(item) {
        //   if (item.userId === userId[0]) {
        //     item.status = 1
        //   }
        // })
        this.crud.toQuery()
      })
    },
    // 拒绝
    doRefuse(userId) {
      this.$confirm('确定拒绝吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sureRefuse(userId)
      })
    },
    // 确定拒绝
    sureRefuse(userId) {
      userDesktopNoPass(userId).then(() => {
        this.crud.notify('拒绝成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        // this.crud.data.map(function(item) {
        //   if (item.userId === userId[0]) {
        //     item.status = -1
        //   }
        // })
        this.crud.toQuery()
      })
    },
    // 批量同意
    doAllAgree(list) {
      const userIdList = []
      list.map(item => {
        userIdList.push(item.userId)
      })
      if (_.isEmpty(userIdList)) {
        this.crud.notify('请先勾选需要同意的申请人', CRUD.NOTIFICATION_TYPE.WARNING)
      } else {
        this.doAgree(userIdList)
      }
    },
    // 批量拒绝
    doAllRefuse(list) {
      const userIdList = []
      list.map(item => {
        userIdList.push(item.userId)
      })
      if (_.isEmpty(userIdList)) {
        this.crud.notify('请先勾选需要拒绝的申请人', CRUD.NOTIFICATION_TYPE.WARNING)
      } else {
        this.doRefuse(userIdList)
      }
    }
  }
}
</script>

<style scoped>

</style>
